/**
 * 模式设置
 * @author xiaoxujs
 */

import { Button, ConfigProvider, message, Switch } from "antd";
import { MoshiSetBox } from "../../style";
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider";
import { FC, useEffect, useState } from "react";
import { IIYckzZyLoadControlParamSetModeQueryVOS } from "../../../../../type/remoteControl/loadingControlList";
import ShuakaSetParamsModule from '../ShuakaSetParamsModule'; // 刷卡设置弹窗
import ErweimaSetParamsModule from '../ErweimaSetParamsModule'; // 二维码设置弹窗
import ChepaihaoSetParamsModule from '../ChepaihaoSetParamsModule'; // 车牌号设置弹窗
import { getYckzZyLoadControlModeStatusUpdate } from "../../../api";


const MoshiSet: FC<{
    moshiData?: IIYckzZyLoadControlParamSetModeQueryVOS[];
    clickId?: string;
    handleSetCallback: () => void;
}> = ({
    moshiData,
    clickId,
    handleSetCallback
}) => {
        const [shaukaData, setShaukaData] = useState<IIYckzZyLoadControlParamSetModeQueryVOS>(); //刷卡数据
        const [erweimaData, setErweimaData] = useState<IIYckzZyLoadControlParamSetModeQueryVOS>(); // 二维码
        const [chepaihaoData, setChepaihaoData] = useState<IIYckzZyLoadControlParamSetModeQueryVOS>(); // 车牌号识别
        const [shaukaSetShow, setShaukaSetShow] = useState(false); //刷卡设置 显示
        const [erweimaSetShow, setErweimaSetShow] = useState(false); //二维码设置
        const [chepaihaiSetShow, setChepaihaiSetShow] = useState(false) //车牌号设置



        useEffect(() => {
            if (moshiData) {
                moshiData.forEach(element => {
                    if (element.type === 0) {
                        setShaukaData(element)
                    } else if (element.type === 1) {
                        setErweimaData(element)
                    } else if (element.type === 2) {
                        setChepaihaoData(element)
                    }
                })
            }
        }, [moshiData])
        // 设置
        const handleSwitch = async (e: boolean, id?: string) => {
            if (id) {
                const params = {
                    barrierId: id,
                    status: e ? '0' : '1'
                }
                const { code, msg } = await getYckzZyLoadControlModeStatusUpdate(params) as { code: number; msg: string };
                if (code === 20000) {

                    handleSetCallback();
                } else {
                    message.error(msg);
                }
            }
        }

        return <MoshiSetBox>
            <div className="title">模式设置</div>
            <div className="cards-box">
                <div className="cards-item-box" style={{marginRight: '2rem'}}>
                    <div className="card-item-title-box">
                        <div className="card-item-title-left-box">
                            <span className="shuaka-text">刷卡</span>
                            <span className="shiyongzhuangtai-text" >使用状态：</span>
                            <ConfigProvider
                                theme={{
                                    components: {
                                        Switch: {
                                            colorPrimary: '#02D154',
                                            colorPrimaryHover: '#02D154',
                                            trackHeight: useWindowFontSize(20),
                                            handleSize: useWindowFontSize(16),
                                            trackMinWidth: useWindowFontSize(34),
                                        }
                                    }
                                }}
                            >
                                <Switch checked={shaukaData?.isNotUse === 0 ? true : false} onChange={(e) => handleSwitch(e, shaukaData?.barrierId)} />
                            </ConfigProvider>
                            {
                                shaukaData?.isNotUse === 0 ? <span className="qiyong-text">启用</span> : <span className="tingyong-text">停用</span>
                            }


                        </div>
                        <Button type="link" onClick={() => {
                            setShaukaSetShow(true)
                        }}>设置参数</Button>
                    </div>
                    <div className="card-item-commit-box">
                        <div className="card-item-commit-title-box">
                            <div className="card-item-commit-title-text">设备序列号</div>
                            <div className="card-item-commit-title-text">设备品牌</div>
                        </div>
                        <div className="card-item-commit-value-box">
                            <div className="card-item-commit-value-text">{(shaukaData && shaukaData.serial) || '--'}</div>
                            <div className="card-item-commit-value-text">{(shaukaData && shaukaData.brand) || '--'}</div>
                        </div>
                    </div>
                </div>
                <div className="cards-item-box" style={{marginRight: '2rem'}}>
                    <div className="card-item-title-box">
                        <div className="card-item-title-left-box">
                            <span className="shuaka-text">二维码</span>
                            <span className="shiyongzhuangtai-text" >使用状态：</span>
                            <ConfigProvider
                                theme={{
                                    components: {
                                        Switch: {
                                            colorPrimary: '#02D154',
                                            colorPrimaryHover: '#02D154',
                                            trackHeight: useWindowFontSize(20),
                                            handleSize: useWindowFontSize(16),
                                            trackMinWidth: useWindowFontSize(34),
                                        }
                                    }
                                }}
                            >
                                <Switch checked={erweimaData?.isNotUse === 0 ? true : false} onChange={(e) => handleSwitch(e, erweimaData?.barrierId)} />
                            </ConfigProvider>
                            {
                                erweimaData?.isNotUse === 0 ? <span className="qiyong-text">启用</span> : <span className="tingyong-text">停用</span>
                            }
                        </div>
                        <Button type="link" onClick={() => setErweimaSetShow(true)}>设置参数</Button>
                    </div>
                    <div className="card-item-commit-box">
                        <div className="card-item-commit-title-box">
                            <div className="card-item-commit-title-text">设备序列号</div>
                            <div className="card-item-commit-title-text">设备品牌</div>
                        </div>
                        <div className="card-item-commit-value-box">
                            <div className="card-item-commit-value-text">{(erweimaData && erweimaData.serial) || '--'}</div>
                            <div className="card-item-commit-value-text">{(erweimaData && erweimaData.brand) || '--'}</div>
                        </div>
                    </div>
                </div>
                <div className="cards-item-box">
                    <div className="card-item-title-box">
                        <div className="card-item-title-left-box">
                            <span className="shuaka-text">车牌号识别</span>
                            <span className="shiyongzhuangtai-text" >使用状态：</span>
                            <ConfigProvider
                                theme={{
                                    components: {
                                        Switch: {
                                            colorPrimary: '#02D154',
                                            colorPrimaryHover: '#02D154',
                                            trackHeight: useWindowFontSize(20),
                                            handleSize: useWindowFontSize(16),
                                            trackMinWidth: useWindowFontSize(34),
                                        }
                                    }
                                }}
                            >
                                <Switch checked={chepaihaoData?.isNotUse === 0 ? true : false} onChange={(e) => handleSwitch(e, chepaihaoData?.barrierId)} />
                            </ConfigProvider>
                            {
                                chepaihaoData?.isNotUse === 0 ? <span className="qiyong-text">启用</span> : <span className="tingyong-text">停用</span>
                            }
                        </div>
                        <Button type="link" onClick={() => setChepaihaiSetShow(true)}>设置参数</Button>
                    </div>
                    <div className="card-item-commit-box">
                        <div className="card-item-commit-title-box">
                            <div className="card-item-commit-title-text">设备序列号</div>
                            <div className="card-item-commit-title-text">设备品牌</div>
                        </div>
                        <div className="card-item-commit-value-box">
                            <div className="card-item-commit-value-text">{(chepaihaoData && chepaihaoData.serial) || '--'}</div>
                            <div className="card-item-commit-value-text">{(chepaihaoData && chepaihaoData.brand) || '--'}</div>
                        </div>
                    </div>
                </div>
            </div>
            <ShuakaSetParamsModule
                open={shaukaSetShow}
                handleSetCallback={() => {
                    handleSetCallback();
                    setShaukaSetShow(false);
                }}
                clickData={shaukaData}
                clickId={clickId}
            />
            <ErweimaSetParamsModule
                open={erweimaSetShow}
                handleSetCallback={() => {
                    handleSetCallback();
                    setErweimaSetShow(false);
                }}
                clickData={erweimaData}
                clickId={clickId}
            />
            <ChepaihaoSetParamsModule
                open={chepaihaiSetShow}
                handleSetCallback={() => {
                    handleSetCallback();
                    setChepaihaiSetShow(false);
                }}
                clickData={chepaihaoData}
                clickId={clickId}
            />
        </MoshiSetBox>
    }

export default MoshiSet;